<script lang="jsx" setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import {
  getBoardPositionSelect,
  getTechnologySelect,
  getUnSelectedFrame
} from '@/service/api/modules/workwear/board-management';
import SelectScreenType from './select-screen-type.vue';
import SelectModuleNo from './select-module-No.vue';

const props = defineProps({
  rowData: {
    type: Object,
    default: () => null
  }
});

const selectScreenTypeRef = ref(null);
const selectModuleNoRef = ref(null);
const frameList = ref([]);
const locationList = ref([]);
const usageProcessList = ref([]);
const formRef = ref(null);
const formModel = ref(getModel());

function getModel() {
  if (props.rowData) {
    return props.rowData;
  }
  return {
    frame: null,
    frameNo: null,
    moduleNo: null,
    toolModel: null,
    dateCode: null,
    screenTypeName: null,
    screenTypeId: null,
    meshCount: null,
    totalLive: null,
    totalWc: null,
    usageProcess: null,
    face: null,
    locationName: null,
    location: null,
    locationId: null,
    useCount: null,
    washCount: null,
    tensionA: null,
    tensionB: null,
    tensionC: null,
    tensionD: null,
    tensionE: null,
    makeDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    makeBy: null,
    remark: null
  };
}

function getLocationList() {
  getBoardPositionSelect().then(({ data, error }) => {
    if (!error) {
      locationList.value = data.list?.map(item => {
        return {
          ...item,
          label: item.locationName,
          value: item.locationName
        };
      });
    }
  });
}

getLocationList();

function getUsageProcessList() {
  getTechnologySelect(formModel.value.moduleNo).then(({ data, error }) => {
    if (!error) {
      usageProcessList.value = data.map(item => {
        return {
          ...item,
          label: item.techName,
          value: item.techName
        };
      });
    }
  });
}

async function getFrameList() {
  const params = {};
  if (props.rowData) {
    params.frameNo = props.rowData.frameNo;
  }
  const { data, error } = await getUnSelectedFrame(params);
  if (!error) {
    frameList.value = data.map(item => {
      return {
        ...item,
        label: `${item.frameName}`,
        value: item.frameNo
      };
    });
  }
}

getFrameList();

if (props.rowData) {
  getUsageProcessList();
}

const formList = [
  {
    label: '网框编码',
    key: 'frameNo',
    span: 12,
    type: 'select',
    placeholder: '请输入网框编码',
    search: true,
    // rule: [{ required: true, message: '请输入网框编码', trigger: 'blur' }],
    selectOptions: frameList
    // change: () => {
    //   formModel.value.frameNo = frameList.value.find(item => item.value === formModel.value.frame).frameNo;
    // }
  },
  {
    label: '生产型号',
    key: 'moduleNo',
    span: 12,
    type: 'input',
    className: 'cursor-pointer',
    placeholder: '请选择生产型号',
    readonly: true,
    rule: [{ required: true, message: '请选择生产型号', trigger: 'change' }],
    click: () => {
      // selectModuleNoVisible.value = true;
      selectModuleNoRef.value.handleOpen(formModel.value.moduleNo);
    }
  },
  // {
  //   label: '工具型号',
  //   key: 'toolModel',
  //   span: 12,
  //   type: 'input',
  //   placeholder: '请输入工具型号'
  // },

  {
    label: '周期',
    key: 'dateCode',
    span: 12,
    type: 'input',
    placeholder: '请输入周期'
  },
  {
    label: '网板类型',
    key: 'screenTypeName',
    span: 12,
    type: 'input',
    readonly: true,
    placeholder: '请选择网板类型',
    className: 'cursor-pointer',
    click: () => {
      // selectScreenTypeVisible.value = true;
      selectScreenTypeRef.value.handleOpen(formModel.value.screenTypeName);
    }
  },
  {
    label: '网纱T数',
    key: 'meshCount',
    span: 12,
    disabled: true,
    type: 'input'
  },
  {
    label: '使用寿命',
    key: 'totalLive',
    span: 12,
    disabled: true,
    type: 'input'
  },
  {
    label: '最大翻洗次数',
    key: 'totalWc',
    span: 12,
    disabled: true,
    type: 'input'
  },
  {
    label: '使用工艺',
    key: 'techName',
    span: 12,
    type: 'select',
    search: true,
    placeholder: '请选择使用工艺',
    selectOptions: usageProcessList,
    change: e => {
      formModel.value.techId = usageProcessList.value.find(item => item.label === e).techId;
    }
  },
  {
    label: '面向',
    key: 'face',
    span: 12,
    type: 'dictionary',
    selectType: 'select',
    showSearch: true,
    placeholder: '请选择面向',
    dictCode: 'board_facing'
  },
  {
    label: '存放区域',
    key: 'locationName',
    span: 12,
    type: 'select',
    placeholder: '请选择存放区域',
    search: true,
    selectOptions: locationList,
    change: () => {
      formModel.value.locationId = locationList.value.find(
        item => item.label === formModel.value.locationName
      ).locationId;
    }
  },
  {
    label: '印次',
    key: 'useCount',
    span: 12,
    type: 'input',
    placeholder: '请输入印次'
  },
  // {
  //   label: '翻洗次数',
  //   key: 'washCount',
  //   span: 12,
  //   type: 'input',
  //   placeholder: '请输入翻洗次数'
  // },
  {
    label: 'A点张力',
    key: 'tensionA',
    span: 12,
    type: 'input',
    placeholder: '请选择A点张力'
  },
  {
    label: 'B点张力',
    key: 'tensionB',
    span: 12,
    type: 'input',
    placeholder: '请选择B点张力'
  },
  {
    label: 'C点张力',
    key: 'tensionC',
    span: 12,
    type: 'input',
    placeholder: '请选择C点张力'
  },
  {
    label: 'D点张力',
    key: 'tensionD',
    span: 12,
    type: 'input',
    placeholder: '请选择D点张力'
  },
  {
    label: 'E点张力',
    key: 'tensionE',
    span: 12,
    type: 'input',
    placeholder: '请选择E点张力'
  },
  {
    label: '制作时间',
    key: 'makeDate',
    span: 12,
    type: 'datePicker',
    placeholder: '请选择制作时间',
    showTime: true
  },
  {
    label: '制作人',
    key: 'makeBy',
    span: 12,
    type: 'dictionary',
    selectType: 'select',
    showSearch: true,
    placeholder: '请选择制作人',
    dictCode: 'board_maker',
    rule: [{ required: true, message: '请选择制作人', trigger: 'change' }]
  },
  {
    label: '备注',
    key: 'remark',
    span: 24,
    type: 'textarea',
    placeholder: '请输入备注'
  }
];
function handleSelectScreenType(row) {
  formModel.value.screenTypeName = row.itemName;
  formModel.value.screenTypeId = row.screenTypeId;
  formModel.value.meshCount = row.meshCount;
  formModel.value.totalLive = row.totalLive;
  formModel.value.totalWc = row.totalWc;
}

function handleSelectModuleNo(row) {
  formModel.value.moduleNo = row.moduleNo;
  formModel.value.techName = null;
  getUsageProcessList();
}

async function validateForm() {
  await formRef.value.validateForm();
}

defineExpose({
  model: formModel.value,
  validateForm
});
</script>

<template>
  <div class="h-full w-full">
    <Form ref="formRef" v-model:model="formModel" :form-list="formList"></Form>
    <SelectScreenType ref="selectScreenTypeRef" @select="handleSelectScreenType"></SelectScreenType>
    <SelectModuleNo ref="selectModuleNoRef" @select="handleSelectModuleNo"></SelectModuleNo>
  </div>
</template>

<style lang="scss" scoped></style>
